<template>
  <div>
    <!-- TableModule  tableModule是一个对象，下面有解释 -->
    <TableModule :tableModule="tableModule" ref="TableModuleRef">
      <!-- #event是插入的新增按钮和删除按钮，具体操作按照自己的业务流程实现 -->
      <template #event>
        <el-button @click="exportExcel()">导出到excel</el-button>
      </template>
      <!-- #tableColumn 插入表格的操作列 -->
      <template #tableColumn>
        <el-table-column align="center" fixed="right" label="操作" width="120">
          <template slot-scope="scope" #default="scope">
            <el-button @click="ViewDetails(scope)">查看详情</el-button>
          </template>
        </el-table-column>
      </template>
    </TableModule>
  </div>
  <el-dialog v-model="stuVisible" :title="stuTitle" center width="70%">
    <TableModule :tableModule="stuTableModule" ref="StuTableModuleRef">
      <!-- #tableColumn 插入表格的操作列 -->
      <template #tableColumn>
        <el-table-column align="center" fixed="right" label="操作" width="160">
          <template slot-scope="scope" #default="scope">
            <el-button-group>
              <el-button
                v-if="scope.row['Indexs'] == state.sturowIndex"
                type="primary"
                @click="Save(scope)"
                >保存</el-button
              >
              <el-button v-else type="primary" @click="Edit(scope)"
                >编辑</el-button
              >
            </el-button-group>
          </template>
        </el-table-column>
      </template>
    </TableModule>
  </el-dialog>
  <!-- 单个学生弹窗 -->
  <!-- <AddFormModule :addModule="addModule"></AddFormModule> -->
  <!-- 编辑信息弹窗 -->
  <!-- <EditFormModule :editModule="editModule"></EditFormModule> -->
  <!-- （管理员）分页查询某学生考勤数据列表情况接口 -->
</template>

<script setup>
import TableModule from "@/components/TableModule.vue";
// import AddFormModule from "@/components/AddFormModule.vue";
// import EditFormModule from "@/components/EditFormModule.vue";
import { reactive, toRefs, ref, onMounted, toRaw } from "vue";
import { toast } from "@/utils";
import { columnsData, queryData } from "./table"; // 引入我们配置好的数据
import { columnsData as stuColumnsData } from "./student"; // 引入我们配置好的数据
import {
  getAllList,
  getStudentList,
  getExcel,
  updateInfo,
} from "@/api/record.js";
import { getTermslist } from "@/api/team.js";

const props = defineProps({
  height: Number,
});
const state = reactive({
  columns: columnsData, // 表格配置
  query: queryData, // 查询条件配置
  queryForm: {}, // 查询form表单
  // editVisible: false,//编辑表单弹窗
  // editTitle: "",//编辑表单标题
  // edit: editData, //编辑表单配置
  // editForm: {}, //编辑form表单
  // addVisible: false,//新增表单弹窗
  // add: addData, //新增表单配置
  // addForm: {}, //新增form表单
  loading: false, // 加载状态
  dataList: [], // 列表数据
  rowIndex: null, // 行索引 用于可编辑单元格
  columnIndex: null, // 列索引 用于可编辑单元格
  multipleSelection: [], //多选数组
  height: 0,
  pages: {
    // 分页数据
    total: 0,
    limit: 10,
    page: 1,
  },
  stuVisible: false,
  stuTitle: "",
  stucolumns: stuColumnsData, // 表格配置
  stuheight: 300,
  studataList: [], // 列表数据
  sturowIndex: null, // 行索引 用于可编辑单元格
  stucolumnIndex: null, // 列索引 用于可编辑单元格
  stumultipleSelection: [], //多选数组
  stupages: {
    // 分页数据
    total: 0,
    limit: 10,
    page: 1,
  },
});

const {
  loading,
  dataList,
  columns,
  pages,
  query,
  queryForm,
  // addVisible,
  // add,
  // addForm,
  // editVisible,
  // editTitle,
  // edit, //编辑表单配置
  // editForm, //编辑表单
  multipleSelection,
  rowIndex,
  columnIndex,
  height,
  stuVisible,
  stuTitle,
  sturowIndex,
  stucolumnIndex,
  stumultipleSelection,
  stucolumns,
  stuheight,
  studataList,
  stupages,
} = toRefs(state);

const TableModuleRef = ref();
const StuTableModuleRef = ref();

onMounted(async () => {
  // console.log(`output->`, state.query);
  setTimeout(() => {
    state.height = props.height;
  }, 100);
  //state.queryForm.teamId = state.query[0].options[0].teamId;
  //const { data } = await getTermslist(state.queryForm);
  //state.query[1].options = data.reverse();
  //state.queryForm.term = state.query[1].options[0];
  //getDataList();
});

// 传给表格子组件的
const tableModule = ref({
  editInputBlur: editInputBlur, // 可编辑单元的，失去焦点时的回调
  callback: getDataList, // 回调，子组件中可以看到很多调用callback的，这里对应的是获取列表数据的方法
  selectcallback: selectChange,
  // 以下不说了，上面都给解释了
  queryForm: queryForm,
  query: query,
  columns: columns,
  dataList: dataList,
  multipleSelection: multipleSelection,
  rowIndex: rowIndex,
  columnIndex: columnIndex,
  height: height,
  loading: loading,
  pages: pages,
});

// 传给表格子组件的
const stuTableModule = ref({
  editInputBlur: editInputBlur, // 可编辑单元的，失去焦点时的回调
  callback: getDataList, // 回调，子组件中可以看到很多调用callback的，这里对应的是获取列表数据的方法
  // selectcallback: selectChange,
  // 以下不说了，上面都给解释了
  columns: stucolumns,
  height: stuheight,
  dataList: studataList,
  // multipleSelection: stumultipleSelection,
  rowIndex: sturowIndex,
  columnIndex: stucolumnIndex,
  loading: loading,
  pages: stupages,
});

// 传给新增表单子组件的
// const addModule = ref({
//   editInputBlur: editInputBlur, // 可编辑单元的，失去焦点时的回调
//   callback: addInfoData, // 回调，子组件中可以看到很多调用callback的，这里对应的是获取列表数据的方法
//   selectcallback: addChange,
//   // 以下不说了，上面都给解释了
//   addForm: addForm,
//   add: add,
//   addVisible: addVisible,
// });

// 传给新增表单子组件的
// const editModule = ref({
//   editInputBlur: editInputBlur, // 可编辑单元的，失去焦点时的回调
//   callback: editInfoData, // 回调，子组件中可以看到很多调用callback的，这里对应的是获取列表数据的方法
//   // 以下不说了，上面都给解释了
//   editForm: editForm,
//   editTitle: editTitle,
//   edit: edit,
//   editVisible: editVisible,
// });

//查询表单值变化
async function selectChange(porp) {
  if (porp == "teamId") {
    // console.log(`output->selectChange`, porp, state.queryForm);
    if (state.queryForm.teamId != "") {
      const { data } = await getTermslist(state.queryForm);
      state.query[1].options = data;
      state.queryForm.term = data[0];
    }
  }
}

//新增表单值变化
// function addChange() {}

//查找字段name是否为变量str
// function isNameInArray(arr, strName, str) {
//   return arr.find((item) => item[strName] === str);
// }

// 获取列表信息
async function getDataList() {
  state.loading = true;
  //参数
  let params = {
    pageNum: state.pages.page,
    pageSize: state.pages.limit,
  };
  if (state.queryForm.teamId) {
    params.teamId = state.queryForm.teamId;
  }
  if (state.queryForm.term) {
    params.term = state.queryForm.term;
  }
  if (state.queryForm.dateIn) {
    params.startTime = state.queryForm.dateIn[0];
    params.endTime = state.queryForm.dateIn[1];
  }
  if (state.queryForm.recordStatus) {
    params.recordStatus = state.queryForm.recordStatus;
  }
  // 掉自己的接口，切勿复制粘贴
  const res = await getAllList(params);
  if (res.code == 200) {
    console.log(`output->res`, res);
    state.dataList = res.data.records;
    state.pages.total = res.data.total;
  } else {
    console.log(`output->error`, res);
    toast(res.data ? res.data : "获取失败", "error");
  }
  state.loading = false;
}

// 点击新增触发弹窗
// function Add() {
//   addVisible.value = true;
// }

//新增信息
// async function addInfoData() {
//   console.log(`output->`, state.addForm);
//   const res = await addInfo(state.addForm);
//   // console.log(`output->addInfoData`, res);
//   if (res.code == 200) {
//     toast(res.data);
//     addVisible.value = false;
//     getDataList();
//   } else {
//     toast(res.data, "error");
//   }
// }

function Edit(row) {
  // 编辑事件
  state.sturowIndex = row.$index;
  state.stucolumnIndex = row.cellIndex - 1;
}

async function Save(row) {
  // 编辑事件
  // console.log(`output->编辑事件`);
  const res = await updateInfo(toRaw(row.row).recordId, {
    recordStatus: Number(toRaw(row.row).recordStatus),
  });
  if (res.code == 200) {
    // console.log(`output->Edit`, res);
    toast(res.data ? res.data : "修改成功");
    state.sturowIndex = null;
    state.stucolumnIndex = null;
  } else {
    // console.log(`output->Edit`, res);
    toast(res.data ? res.data : "修改失败", "error");
  }
  // state.editVisible = true;
  // state.editTitle = "修改 " + toRaw(row.row).name + " 的信息";
  // state.editForm = toRaw(row.row);
}

//修改信息
// async function editInfoData() {
//   console.log(`output->`, state.editForm);
// }

// function Delete() {
//   // 删除事件
//   toRaw(state.multipleSelection).forEach(async (item) => {
//     console.log(`output->Delete`, item.locationId);
//     const res = await deleteInfo(item.locationId);
//     console.log(`output->res`, item.userId, res);
//     if (res.code == 200) {
//       toast((item.userId = "已删除"));
//       getDataList();
//     } else {
//       toast(res.data, "error");
//     }
//   });
// }

async function ViewDetails(row) {
  console.log(`output->ViewDetails`, toRaw(row.row));
  state.stuTitle = toRaw(row.row).studentName;
  state.loading = true;
  state.stuVisible = true;
  //参数
  let params = {
    pageNum: state.pages.page,
    pageSize: state.pages.limit,
    teamId: state.queryForm.teamId,
    term: state.queryForm.term,
    studentId: toRaw(row.row).studentId,
  };
  if (state.queryForm.dateIn) {
    params.startTime = state.queryForm.dateIn[0];
    params.endTime = state.queryForm.dateIn[1];
  }
  if (state.queryForm.recordStatus) {
    params.recordStatus = state.queryForm.recordStatus;
  }
  const res = await getStudentList(params);
  if (res.code == 200) {
    console.log(`output->res`, res);
    state.studataList = res.data.records;
    state.stupages.total = res.data.total;
  } else {
    console.log(`output->error`, res);
    toast(res.data ? res.data : "获取失败", "error");
    state.stuVisible = false;
  }
  state.loading = false;
}

function exportExcel() {
  state.loading = true;
  const team = state.query[0].options.find(
    (team) => team.teamId === state.queryForm.teamId
  );
  const dateIn = state.queryForm.dateIn
    ? `${state.queryForm.dateIn[0]}至${state.queryForm.dateIn[1]}`
    : "";
  getExcel({
    pageSize: state.pages.limit,
    pageNum: state.pages.page,
    teamId: state.queryForm.teamId,
    term: state.queryForm.term,
    startTime: state.queryForm.dateIn ? state.queryForm.dateIn[0] : "",
    endTime: state.queryForm.dateIn ? state.queryForm.dateIn[1] : "",
    recordStatus: state.queryForm.recordStatus,
  })
    .then((response) => {
      // console.log(`output->exportExcel`, response);
      const url = window.URL.createObjectURL(new Blob([response]));
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute(
        "download",
        `${team.teamName + state.queryForm.term + dateIn}考勤.xlsx`
      ); // 这里设置导出的文件名
      document.body.appendChild(link);
      link.click();
      toast(res.data ? res.data : "导出成功");
    })
    .catch((error) => {
      console.error(error); // 如果异步操作失败，则打印错误信息
    });
  state.loading = false;
}

function editInputBlur() {
  console.log("失去焦点回调");
}
</script>

<style lang="scss" scoped></style>
